<template>
	<view class="home">
		<view class="navBg"> 管理驾驶舱 </view>
		<view class="navTop">
			<view class="radioButtonList">
				<u-subsection fontSize="28" activeColor="#4666F2" inactiveColor="#4666F2" :list="navButtonlist" mode="subsection" :current="currentNavBtn" @change="navBtnClick"></u-subsection>
			</view>
			<view class="dataUpdateTime">
				数据更新日期
				<view class="">
					{{ dataUpdateTime }}
				</view>
			</view>
		</view>
		<view class="overView">
			 <view class="box" v-for="(item,index) in overViewList" :key="index">
				<view class="title">{{item.title}}</view>
				<view class="numbers">
					<view class="amount"> {{item.amount}} </view>
					<view class="biNum"> {{item.biNum}} </view>
				</view>
				<view class="numbersDesc">
					<view class="amount"> 金额 </view>
					<view class="biNum"> 笔数 </view>
				</view>
			</view>
		</view>
		<view class="basicInfo">
			<view class="chart">
				<view class="title"> 企业登记所在地占比 </view>
				<view class="trend" id="qydjszd"></view>
			</view>
			<view class="chart">
				<view class="title"> 担保银行占比 </view>
				<view class="trend" id="dbyh"></view>
			</view>
			<view class="chart">
				<view class="title"> 担保产品排名 </view>
				<view class="trend" id="dbcp"></view>
			</view>

			<view class="chart">
				<view class="title"> 企业行业排名 </view>
				<view class="trend" id="qyhy"></view>
			</view>

			<view class="chart">
				<view class="title"> 业务信息 </view>
				<view class="trend" id="ywxx"></view>
			</view>

			<view class="chart">
				<view class="title"> 费用收取 </view>
				<view class="trend" id="fysq"></view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		createPieOptions,
		createBarOptions,
		createLineOptions,
		createQydjszdData,
		createDbyhData,
		createDbcpData,
		createQyhyData,
		createYwxxData,
		createFysqData,
		overViewMap
	} from './index'
	import { getHomeData } from '@/service/api/home.js';
	export default {
		data() {
			return {
				navButtonlist:['当月', '当年', '累计'],
				currentNavBtn:1,
				dataUpdateTime: '',
				overViewList:[{
					title:'放款总量',
					amount:'0',
					biNum:'0' 
				},{
					title:'备案总量',
					amount:'0',
					biNum:'0' 
				},{
					title:'在保余额',
					amount:'0',
					biNum:'0' 
				},{
					title:'代偿总量',
					amount:'0',
					biNum:'0' 
				},{
					title:'代偿审查总量',
					amount:'0',
					biNum:'0' 
				},{
					title:'代偿收回总量',
					amount:'0',
					biNum:'0' 
				},{
					title:'保费收取总量',
					amount:'0',
					biNum:'0' 
				},{
					title:'收回补偿总量',
					amount:'0',
					biNum:'0' 
				}],
			}
		},
		mounted() {
			this.initDom();

			setTimeout(_ => {
				this.getHeadData()
			}, 500)
		},
		methods: {
			async getHeadData() {
				const result = await getHomeData();
				console.log('homeDataGetList', result)
				const { status, data } = result.data
				if (status) {
					this.headHomeData = data;
					const { dqDto, yhDto, cpDto, hyDto, ywDto, fyDto } = data;
					//this.tabClick('当年')
					//更新企业登记所在地
					this.updateQydjszd(createQydjszdData(dqDto));
					//更新担保银行
					this.updateDbyh(createDbyhData(yhDto));
					//更新担保产品排名
					this.updateDbcp(createDbcpData(cpDto));
					//更新企业行业排名
					this.updateQyhy(createQyhyData(hyDto));
					//更新业务信息
					this.updateYwxx(createYwxxData(ywDto));
					//更新费用收取
					this.updateFysq(createFysqData(fyDto))
				};
				this.navBtnClick(1)
				
			},
			navBtnClick(val){
				console.log('navBtnClick',val);
				this.currentNavBtn = val;
				// 根据 val 的值确定使用哪个字段
				const field = val === 1 ? 'year' : val === 0 ? 'month' : 'all';
				this.overViewList.forEach((item) => {
					const { dto } = overViewMap[item.title];
					const data = this.headHomeData[dto];
			
					if (data) {
						item.amount = data[`${field}Amount`] || '-';
						item.biNum = data[`${field}Num`] || '-';
					} else {
						item.amount = '-';
						item.biNum = '-';
					}
			
					// 如果是放款总量，更新数据更新时间
					if (item.title === '放款总量') {
						this.dataUpdateTime = data.currentDate || '';
					}
				});
			},
			//更新企业登记所在
			updateQydjszd(data) {
				this.qydjszdInstance.setOption({
					series: [{
						data
					}]
				});
			},
			//更新担保银行排名
			updateDbyh(data) {
				this.dbyhInstance.setOption({
					series: [{
						data
					}]
				});
			},
			//更新担保产品排名
			updateDbcp({ Xdata, Ydata }) {
				this.dbcpInstance.setOption({
					xAxis: [{
						data: Xdata
					}],
					series: [{
						data: Ydata
					}]
				});
			},
			//更新企业行业排名
			updateQyhy({ Xdata, Ydata }) {
				this.qyhyInstance.setOption({
					xAxis: [{
						data: Xdata
					}],
					series: [{
						data: Ydata
					}]
				});
			},
			//更新业务信息折线图
			updateYwxx({xAxisData, series}) {
				this.ywxxInstance.setOption({
					legend: [{
						data: series.map(item => item.name)
					}],
					xAxis: [{
						data: xAxisData
					}],
					series
				});
			},
			//更新费用收取折线图
			updateFysq({xAxisData, series}) {
				this.fysqInstance.setOption({
					legend: [{
						data: series.map(item => item.name)
					}],
					xAxis: [{
						data: xAxisData
					}],
					series
				});
			},
			initDom() {
				//企业登记所在地
				this.qydjszdInstance = createPieOptions({
					documentID: 'qydjszd',
				})
				//担保银行占比
				this.dbyhInstance = createPieOptions({
					documentID: 'dbyh',
				})
				//担保产品排名
				this.dbcpInstance = createBarOptions({
					documentID: 'dbcp' 
				})
				//企业行业排名
				this.qyhyInstance = createBarOptions({
					documentID: 'qyhy', 
				})
				//业务信息
				this.ywxxInstance = createLineOptions({
					documentID: 'ywxx', 
				})
				//费用收取
				this.fysqInstance = createLineOptions({
					documentID: 'fysq', 
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		background-color: #F5F5F5 ;
		.navBg{
			background-color: $themeColor;
			height: 50px;
			line-height: 50px;
			font-size: 45rpx;
			text-align: center;
			font-weight: bold;
			color: white;
		}
		.navTop{
			display: flex;
			justify-content: space-between;
			margin: 45rpx 0;
			align-items: center;
			padding: 0 25rpx;
			.radioButtonList{
				width: 500rpx;
			}
			.dataUpdateTime{
				font-size: 24rpx;
				text-align: center;
				color: #888888 ;
			}
		}
		.overView{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			padding: 0 15rpx;
			.box{
				width: 285rpx;// 24%;
				padding:35rpx 25rpx;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 0 6px 2px #eeeeee;
				margin-bottom: 15px;
				overflow: hidden;
				
				
				font-weight: bold;
				.title{
					font-size: 34rpx;
				}
				.numbers,.numbersDesc{
					display: flex;
					justify-content: space-between;
					margin-top: 15rpx;
					font-size: 40rpx;
					.amount{
						color: $themeColor;
					}
					.biNum{
						color: #000;
					}
				}
				.numbersDesc{
					font-size: 28rpx;
					.amount,.biNum{
						color: #888888 ;
					}
				}
			}
		}		
		.basicInfo {
			widows: 100%;
			min-height: 100vh;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.chart {
				width: calc(100% - 20px);
				background-color: #fff;
				box-shadow: 0 0 4px 4px #eeeeee;
				border-radius: 10px;
				padding:25rpx;
				margin: 0 20rpx 25rpx 20rpx;
				position: relative;
				
				.title {
					position: absolute;
					left: 20rpx;
					z-index: 10;
					font-size: 40rpx;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.title::before{
					content: '';
					display: block;
					width: 6px;
					margin-right: 8px;
					background-color: $themeColor;
					height: 20px;
					border-radius: 7px;
				}

				.trend {
					height: 400px;
					width: 100%;
				}
			}
		}
	}
</style>